<template>
  <view>
    <text class="title">智慧考勤系统</text>
    <view class="loginBar">
      <view class="login-content">
        <view class="u-demo-block__content">
          <u-tabs :list="list6" :scrollable="false" @click="handlerTabs"></u-tabs>
        </view>
      </view>
      <view class="login-form">
        <view class="number">账号</view>
        <u--input v-model="userName" placeholder="请输入内容" border="bottom" clearable></u--input>
        <view class="password">密码</view>
        <u--input v-model="userPwd" placeholder="请输入内容" border="bottom" clearable password></u--input>
      </view>
      <view class="regsiter">
        <view>注册</view>
        <view>忘记密码</view>
      </view>
      <button type="primary" class="login-button" @click="clickHandler">登录</button>
    </view>
  </view>
</template>
<script>
  import {
    mapMutations,
    mapGetters,
 
  } from 'vuex';
  export default {
    mixins: [uni.$u.mixin],
    data() {
      return {
        userName: "12345678900",
        userPwd: "123456",
        list6: [{
          name: '老师端',
          permission: 0
        }, {
          name: '学生端',
          permission: 1
        }, {
          name: '家长端',
          permission: 2
        }, ]
      }
    },
    onLoad() {},
    computed: {
      ...mapGetters(['tabBarList']),
    
    },
    methods: {
      ...mapMutations(['setRoleId']),
      handlerTabs(item) {
        this.setRoleId(item.permission)
        console.log(item.permission);
      },
      clickHandler(permission) {
        uni.switchTab({
          url: '/pages/home/home'
        })
        // console.log(this.$store.state.permission, '====');
        console.log(this.tabBarList);
      },
    }
  }
</script>

<style scoped>
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    font-size: 20px;
  }

  .loginBar {
    margin: 50px 40px;
  }

  .regsiter {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .login-form {
    margin-top: 20px;
  }

  .password {
    margin-top: 10px;
  }

  .login-button {
    border-radius: 30px;
    margin-top: 50px;
  }
</style>
